<template>
  <div id="myDiv" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "about",
  data() {
    return {
      kData: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ],
    };
  },
  computed: {
    OnekData() {
      let list = this.kData.map((v) => v[0]);
      return list;
    },
  },
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);

    // 2.设置echarts数据
    let option = {
      title: {
        text: "雷达图",
      },
      // 雷达边界
      radar: [
        {
          shape: "circle",
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 6600 },
            { name: "Information Technology", max: 7000 },
            { name: "Customer Support", max: 5800 },
            { name: "Development", max: 8200 },
            { name: "Marketing", max: 8500 },
          ],
          // 半径
          radius: 120,
          // 旋转 设置坐标系的旋转角度
          startAngle: 120,
          // 维度 层数
          splitNumber: 4,
          axisName: {
            formatter: "{value}",
            color: "#428bd4",
          },
          splitArea: {
            areaStyle: {
              color: ["#77eade", "#26c3bd", "#666", "#439bd4"],
              shadowColor: "rgba(0,0,0,.9)",
              shadowBlur: 10,
            },
          },
        },
      ],
      series: [
        {
          type: "radar",
          // 雷达数据
          data: [
            {
              value: [4200, 5300, 6666, 1234, 5678, 6666],
              areaStyle: {
                // 内容填充
                color: "pink",
              },
            },
          ],
          lineStyle: {
            // 线段类型
            type: "dashed",
          },
        },
      ],
    };
    // 4.绘制图标
    myChart.setOption(option);
  },
};
</script>

<style>
#myDiv {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>